//连接socket服务
var socket = io('http://localhost:3001');
var username,avatar;
/* 
	登录功能
*/
$('#login_avatar li').on('click',function(){
	$(this).addClass('now').siblings().removeClass('now');
})
//点击按钮，登录
$('#loginBtn').on('click',function(){
	//获取input值
	var username = $('#username').val().trim();
	if(!username){
		alert('请输入用户名');return;
	}
	//获取选择的头像
	var avatar = $('#login_avatar li.now img').attr('src')
	// 发送给socket io服务
	socket.emit('login',{username,avatar})
})
socket.on('loginError',data=>{
	alert('用户名已存在')
})
socket.on('loginSuccess',data=>{
	// alert('登录成功');
	//隐藏登录窗口
	$('.login_box').fadeOut();
	$('.container').fadeIn();
	//设置头像和用户名
	$('.avatar_url').attr('src',data.avatar)
	$('.username').html(data.username)
	username = data.username
	avatar = data.avatar
})
//监听添加用户的消息
socket.on('addUser',data=>{
	//添加一条系统消息
	$('.box-bd').append(`
		<div class="system">
		  <p class="message_system">
		    <span class="content">${data.username}加入了群聊</span>
		  </p>
		</div>
	`)
	scrollIntoView()
})
//监听用户列表的消息
socket.on('userList',data=>{
	console.log(data)
	$('.user-list ul').html('');
	data.forEach(item=>{
		$('.user-list ul').append(`
			<li class="user">
				<div class="avatar" ><img src= "${item.avatar}"></div>
				<div class="name" >${item.username}</div>
			</li>
		`)
	})
	$('.totalNum').html(data.length)
})
//监听用户离开的消息
socket.on('delUser',data=>{
	//添加一条系统消息
	$('.box-bd').append(`
		<div class="system">
		  <p class="message_system">
		    <span class="content">${data.username}离开了群聊</span>
		  </p>
		</div>
	`)
	scrollIntoView()
})
//聊天功能
$('.btn-send').on('click',function(){
	//获取到聊天的内容
	var content = $('#content').html().trim()
	$('#content').html('')
	if(!content) return alert('请输入内容')
	//发送给服务器
	socket.emit('sendMessage',{
		msg:content,
		username,
		avatar
	})
})
$("#content").on('keydown',function(event){
	e = event ? event : (window.event ? window.event : null);
	if (e.keyCode == 13) {
		var content = $('#content').html().trim()
		$('#content').html('')
		if(!content) return alert('请输入内容')
		//发送给服务器
		socket.emit('sendMessage',{
			msg:content,
			username,
			avatar
		})
		return false;
	}
})
//监听聊天的消息、
socket.on('receiveMessage',data=>{
	//把接收到的消息显示到聊天窗口中
	if(data.username === username){
		$('.box-bd').append(`
			<div class="message-box">
			  <div class="my message">
			    <img class="avatar" src="${data.avatar}" alt="" />
			    <div class="content">
			      <div class="bubble">
			        <div class="bubble_cont">${data.msg}</div>
			      </div>
			    </div>
			  </div>
			</div>
		`)
	}else{
		$('.box-bd').append(`
			<div class="message-box">
			  <div class="other message">
			    <img class="avatar" src="${data.avatar}" alt="" />
			    <div class="content">
			      <div class="nickname">${data.username}</div>
			      <div class="bubble">
			        <div class="bubble_cont">${data.msg}</div>
			      </div>
			    </div>
			  </div>
			</div>   
		`)
	}
	scrollIntoView()
})
function scrollIntoView(){
	//scrollIntoView(false)滚动到可视区底部
	$('.box-bd').children(':last').get(0).scrollIntoView(false)
}
$("#file").on('change',function(){
	var file = this.files[0]
	var fr = new FileReader()
	fr.readAsDataURL(file)
	fr.onload = function(){
		socket.emit('sendImage',{
			username,
			avatar,
			img:fr.result
		})
	}
})
//监听图片聊天信息
socket.on('receiveImage',data=>{
	//把接收到的消息显示到聊天窗口中
	if(data.username === username){
		$('.box-bd').append(`
			<div class="message-box">
			  <div class="my message">
			    <img class="avatar" src="${data.avatar}" alt="" />
			    <div class="content">
			      <div class="bubble">
			        <div class="bubble_cont"><img src="${data.img}"></div>
			      </div>
			    </div>
			  </div>
			</div>
		`)
	}else{
		$('.box-bd').append(`
			<div class="message-box">
			  <div class="other message">
			    <img class="avatar" src="${data.avatar}" alt="" />
			    <div class="content">
			      <div class="nickname">${data.username}</div>
			      <div class="bubble">
			        <div class="bubble_cont"><img src="${data.img}"></div>
			      </div>
			    </div>
			  </div>
			</div>   
		`)
	}
	$('.box-bd img:last').on('load',function(){
		scrollIntoView()
	})
})
//表情功能
$('.face').on('click',function(){
	$("#content").emoji({
		button:".face",
		position:"topRight",
		showTab:true,
		animation:"fade",
		icons:[
			{
				name:'qq表情',
				path:"../lib/jquery-emoji/img/qq/",
				maxNum:91,
				exclubdeNums:[41,45,54],
				file:".gif",
				placeholder:"#qq_{alias}#"
			},
			{
				name:'贴吧表情',
				path:"../lib/jquery-emoji/img/tieba/",
				maxNum:48,
				file:".jpg",
				placeholder:"#tieba_{alias}#"
			},
			{
				name:'emoji',
				path:"../lib/jquery-emoji/img/emoji/",
				maxNum:84,
				file:".png",
				placeholder:"#emoji_{alias}#"
			}
		]
	})
})
